largura padrão é 300 e o atributo de altura padrão é 15. <canvas> pode ser estilizado como qualquer imagem. Porque usar as definições de largura e altura na própria tag do canvas ? E não no CSS ?
Nota: Se as suas renderizações parecerem distorcidas, tente especificar os atributos width e height no <canvas> e não usando CSS. Stackoverflow.
Atualização da Especificação HTML5 - Canvas de 15 de julho de 2020: HTML - Living Standard >> 4.12.5 The canvas element.
É uma tag similar as demais <div>, <table> com exceção do conteúdo que são renderizados com javascript.
<canvas> </canvas> em nosso arquivo index.html, e criar uma função inicializadora para acessar o canvas quando a página é carregada, e usar a API para desenhar a visualização.<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
// Inserir seu código js aqui
};
| Nome Função | Descrição | Retorno |
|---|---|---|
| clearRect(a, b, c, d) | Limpa um retângulo específico. | Não há retorno algum. |
| fillRect(a, b, c, d) | Desenha um retângulo preenchido. | Não há retorno algum. |
| strokeRect(a, b, c, d) | Desenha um retângulo não preenchido. | Não há retorno algum. |
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
let x = 10;
let y = 50;
let count = 5;
for (let i = 0; i < count; i++) {
ctx.fillRect(i * (x + y) + x, x, y, y);
ctx.strokeRect(i * (x + y) + x, (2 * x) + y, y, y);
ctx.clearRect(i * (x + y) + x, x + 5, y, y - 10);
}
};
 |
| Fonte: Autoria própria |
| Nome Função | Descrição | Valores padrões |
|---|---|---|
| fillStyle | Define o estilo utilizado para preencher as formas. | black |
| lineJoin | Define o estilo utilizado para uniões de linhas. | miter |
| lineWidth | Define a espessura das linhas. | 1.0 |
| strokeStyle | Define o estilo utilizado para linhas. | black |
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
ctx.lineWidth = 4;
ctx.strokeRect(10, 10, 50, 50);
ctx.lineWidth = 6;
ctx.strokeRect(70, 10, 50, 50);
ctx.lineWidth = 8;
ctx.strokeRect(130, 10, 50, 50);
ctx.lineWidth = 10;
ctx.strokeRect(190, 10, 50, 50);
};
 |
| Fonte: Autoria própria |
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
ctx.lineWidth = 20;
ctx.lineJoin = "round";
ctx.strokeRect(20, 20, 100, 100);
ctx.lineJoin = "bevel";
ctx.strokeRect(160, 20, 100, 100);
ctx.lineJoin = "miter";
ctx.strokeRect(300, 20, 100, 100);
};
 |
| Fonte: Autoria própria |
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
let x = 10;
let y = 50;
let count = 5;
ctx.lineWidth = 3;
let interiorCores = ["black", "blue", "gray", "red", "green"];
let linhasCores = ["rgb(0, 0, 0)", "rgb(100, 100, 100)", "rgb(0, 0, 255)", "rgb(255, 0, 0)", "rgb(0, 255, 0)"];
for (let i = 0; i < count; i++) {
ctx.fillStyle = interiorCores[i];
ctx.strokeStyle = linhasCores[i];
ctx.fillRect(i * (x + y) + x, x, y, y);
ctx.strokeRect(i * (x + y) + x, (2 * x) + y, y, y);
};
 |
| Fonte: Autoria própria |
| Nome Função | Descrição | Retorno |
|---|---|---|
| createLinearGradient(x0, y0, x1, y1) | Cria um gradiente linear. | CanvasGradient |
| createRadialGradient(x0, y0, r0, x1, y1, r1) | Cria um gradiente radial. | CanvasGradient |
| addColorStop(position, cor) | Adiciona cores sólidas a linhas gradientes. | Não retorna nada. |
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
let gradiente = ctx.createLinearGradient(0, 0, 500, 140);
gradiente.addColorStop(0, "green");
gradiente.addColorStop(0.3, "blue");
gradiente.addColorStop(0.5, "white");
gradiente.addColorStop(0.7, "orange");
gradiente.addColorStop(1, "red");
ctx.fillStyle = gradiente;
ctx.fillRect(0, 0, 500, 140);
};
 |
| Fonte: Autoria própria |
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
let gradiente = ctx.createRadialGradient(250, 70, 20, 200, 60, 100);
gradiente.addColorStop(0, "green");
gradiente.addColorStop(0.3, "blue");
gradiente.addColorStop(0.5, "white");
gradiente.addColorStop(0.7, "orange");
gradiente.addColorStop(1, "red");
ctx.fillStyle = gradiente;
ctx.fillRect(0, 0, 500, 140);
};
 |
| Fonte: Autoria própria |
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
let gradiente = ctx.createLinearGradient(250, 70, 200, 160);
gradiente.addColorStop(0, "green");
gradiente.addColorStop(0.3, "blue");
gradiente.addColorStop(0.5, "white");
gradiente.addColorStop(0.7, "orange");
gradiente.addColorStop(1, "red");
ctx.fillStyle = gradiente;
ctx.fillRect(150, 20, 75, 100);
ctx.lineWidth = 8;
ctx.strokeStyle = gradiente;
ctx.strokeRect(250, 20, 75, 100);
let gradienteR = ctx.createRadialGradient(250, 150, 20, 200, 100, 100);
gradienteR.addColorStop(0, "green");
gradienteR.addColorStop(0.3, "blue");
gradienteR.addColorStop(0.5, "white");
gradienteR.addColorStop(0.7, "orange");
gradienteR.addColorStop(1, "red");
ctx.fillStyle = gradienteR;
ctx.fillRect(150, 150, 75, 100);
ctx.lineWidth = 8;
ctx.strokeStyle = gradienteR;
ctx.strokeRect(250, 150, 75, 100);
};
 |
| Fonte: Autoria própria |
| Nome Função | Descrição |
|---|---|
| createPattern(imagem, repeticao) | Cria um padrão conforme a imagem passada. |
| repeat | A imagem será repetida na vertical e horizontal. |
| repeat-x | A imagem será repetida somente na horizontal. |
| repeat-y | A imagem será repetida somente na vertical. |
| no-repeat | A imagem será repetida não será repetida. |
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<img src="bola.jpg" hidden id="bola"> <!-- Adicionado -->
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
let imagemElemento = document.getElementById("bola");
let padrao = ctx.createPattern(imagemElemento, "repeat"); /* propriedade a ser modificada */
ctx.fillStyle = padrao;
ctx.fillRect(0, 0, 500, 140);
};
| let padrao = ctx.createPattern(imagemElemento, "repeat"); |
|---|
 |
| Fonte: Autoria própria |
| let padrao = ctx.createPattern(imagemElemento, "repeat-x"); |
|---|
 |
| Fonte: Autoria própria |
| let padrao = ctx.createPattern(imagemElemento, "repeat-y"); |
|---|
 |
| Fonte: Autoria própria |
| let padrao = ctx.createPattern(imagemElemento, "no-repeat"); |
|---|
 |
| Fonte: Autoria própria |
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<img src="bola.jpg" hidden id="bola"> <!-- Adicionado -->
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
let imagemElemento = document.getElementById("bola");
let padrao = ctx.createPattern(imagemElemento, "repeat");
ctx.fillStyle = padrao;
ctx.fillRect(50, 16, 180, 165);
ctx.lineWidth = 20;
ctx.strokeStyle = padrao;
ctx.strokeRect(350, 20, 175, 150);
};
 |
| Fonte: Autoria própria |
| Nome Função | Descrição |
|---|---|
| save() | Salva os valores para as propriedades do estado do desenho e os organiza na pilha de estados. |
| restore() | Pega o primeiro conjunto de valores da pilha de estados e os utiliza para definir o estado de desenho. |
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<div> <!-- Adicionado -->
<button>Save</button> <!-- Adicionado -->
<button>Restore</button> <!-- Adicionado -->
</div> <!-- Adicionado -->
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
let gradiente = ctx.createLinearGradient(500, 0, 500, 140);
gradiente.addColorStop(0, "green");
gradiente.addColorStop(0.3, "blue");
gradiente.addColorStop(0.5, "white");
gradiente.addColorStop(0.7, "orange");
gradiente.addColorStop(1, "red");
let interiorCores = ["black", gradiente, "blue", "gray", "red", "green", "grey"];
let indexador = 0;
ctx.fillStyle = interiorCores[indexador];
draw();
let botoes = document.getElementsByTagName("button");
for (let i = 0; i < botoes.length; i++) {
botoes[i].onclick = botaoPress;
}
function botaoPress(e) {
switch (e.target.innerHTML) {
case 'Save':
ctx.save();
indexador = (indexador + 1) % interiorCores.length;
ctx.fillStyle = interiorCores[indexador];
draw();
break;
case 'Restore':
indexador = Math.max(0, indexador-1);
ctx.restore();
draw();
break;
}
}
function draw() {
ctx.fillRect(0, 0, 500, 140);
}
};
 |
| Fonte: Autoria própria |
| Nome Função | Descrição |
|---|---|
| drawImage(imagem, x, y) | Desenha a imagem a partir das coordenadas (x, y). |
| Existem outras combinações para drawImage(). Os 3o. e 4o. parâmetros opcionais do método drawImage() controlam a escala da imagem. |
<!-- Arquivo index.html - Modificado -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body> <!-- Modificado! -->
<video id="vid" src="timessquare.webm" controls preload="auto" width="360" height="240"></video>
<div>
<button id="pressme">Tirar Foto</button>
</div>
<canvas id="myCanvas" width="360" height="240"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css - Modificado */
canvas {
border: thin solid black;
}
/* elementos filhos diretos do elemento body receberão esta configuração */
body > * {
float: left;
}
/* Arquivo js.js - Modificado */
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let imagemElemento = document.getElementById("vid");
/* Inserir seu código aqui */
document.getElementById("pressme").onclick = function (e) {
ctx.drawImage(imagemElemento, 0, 0, 360, 238);
}
};
 |
| Fonte: Autoria própria |
<!-- Arquivo index.html - Modificado -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body> <!-- Modificado! -->
<video id="vid" src="timessquare.webm" controls auto width="360" height="240"></video>
<canvas id="myCanvas" width="360" height="240"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css - Modificado */
canvas {
border: thin solid black;
}
/* elementos filhos diretos do elemento body receberão esta configuração */
body > * {
float: left;
}
/* Arquivo js.js - Modificado */
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let imagemElemento = document.getElementById("vid");
/* Inserir seu código aqui */
let width = 100;
let height = 10;
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
setInterval(function () {
ctx.drawImage(imagemElemento, 0, 0, 360, 238);
ctx.strokeRect(180 - (width/2), 120 - (height/2), width, height);
}, 25);
setInterval(function () {
width = (width + 1) % 200;
height = (height + 3) % 200;
}, 100);
};
 |
 |
|
| Fonte: Autoria própria | Fonte: Autoria própria |
<!-- Arquivo index.html - Modificado -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body> <!-- Modificado! -->
<div>
<video id="vid" src="timessquare.webm" controls autoplay width="360" height="240"></video>
</div>
<div>
<canvas id="myCanvas1" width="360" height="240"></canvas>
<button id="pressme">Foto</button>
<canvas id="myCanvas2" width="360" height="240"></canvas>
</div>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css - Modificado */
canvas {
border: thin solid black;
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
/* Arquivo js.js - Modificado */
let srcCanvas = document.getElementById("myCanvas1");
let ctx1 = srcCanvas.getContext("2d");
let ctx2 = document.getElementById("myCanvas2").getContext("2d");
let imagemElemento = document.getElementById("vid");
document.getElementById("pressme").onclick = takePicture;
/* Inserir seu código aqui */
let width = 100;
let height = 10;
ctx1.lineWidth = 5;
ctx1.strokeStyle = "red";
ctx2.lineWidth = 30;
ctx2.strokeStyle = "black";
setInterval(function () {
ctx1.drawImage(imagemElemento, 0, 0, 360, 240);
ctx1.strokeRect(180 - (width/2), 120 - (height/2), width, height);
}, 25);
setInterval(function () {
width = (width + 1) % 200;
height = (height + 3) % 200;
}, 100);
function takePicture() {
ctx2.drawImage(srcCanvas, 0, 0, 360, 240);
ctx2.strokeRect(0, 0, 360, 240);
}
};
 |
| Fonte: Autoria própria |
| Nome Função | Descrição |
|---|---|
| beginPath() | Inicia um novo caminho. |
| closePath() | Fecha um caminho existente da primeira linha desenhada até a última. |
| fill() | Preenche as formas de subpaths. |
| isPointInPath(x, y) | Retorna verdadeiro se o ponto existe no caminho da forma desenhada. |
| lineTo(x, y) | Desenha uma subPath com as coordenadas indicadas. |
| moveTo(x, y) | Posiciona o cursor na coordenada especidicada. |
| rect(x, y, w, z) | Desenha um retângulo com início nos pontos (x, y), e com final nas coordenadas (w, z). |
| stroke() | Desenha a linha externa das formas. |
| Nome Função | Descrição |
|---|---|
| font = "bold 12px sans-serif" | Pode ser qualquer coisa que você colocaria na regra font do CSS. Incluindo font style, font variant, font weight, font size, line height, e font family. |
| textAlign = "right" | Controla o alinhamento do texto. É parecido (mas não idêntico) a regra text-align do CSS. Os possíveis valores são start, end, left, right, e center. |
| textBaseline = "bottom" | Controla onde o texto é desenhado relativo ao ponto de início. Os possíveis valores são top, hanging, middle, alphabetic, ideographic, ou bottom. |
| fillText(conteudo, posicao x, posicao y) | desenha o texto de fato. |
<!-- Arquivo index.html - Modificado -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Desenhando com Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="500" height="600">Sem suporte a canvas</canvas>
<script src="js/js1.js"></script>
</body>
</html>
/* Arquivo estilo.css - Modificado */
#myCanvas {
border : 10px solid #555
}
/* Arquivo js.js - Modificado */
let canvas = document.getElementById("myCanvas1");
let ctx = canvas.getContext("2d");
//Desenhando linhas verticais
for (let x = 0.5; x < 500; x += 10)
{
ctx.moveTo(x, 0);
ctx.lineTo(x, 600);
}
//Desenhando linhas horizontais
for (let y = 0.5; y < 600; y += 10)
{
ctx.moveTo(0, y);
ctx.lineTo(600, y);
}
ctx.strokeStyle = "#eee";
ctx.stroke();
// Desenhando uma seta na Horizontal
ctx.beginPath();
ctx.moveTo(0, 40);
ctx.lineTo(240, 40);
ctx.moveTo(260, 40);
ctx.lineTo(500, 40);
ctx.moveTo(495, 35);
ctx.lineTo(500, 40);
ctx.lineTo(495, 45);
// Desenhando uma seta na Vertical
ctx.moveTo(60, 0);
ctx.lineTo(60, 153);
ctx.moveTo(60, 173);
ctx.lineTo(60, 375);
ctx.moveTo(65, 370);
ctx.lineTo(60, 375);
ctx.lineTo(55, 370);
ctx.strokeStyle = "#000";
ctx.stroke();
//Desenhando x, y, e as coordenadas
ctx.font = "bold 12px sans-serif";
ctx.fillText("x", 248, 43);
ctx.fillText("y", 58, 165);
ctx.textBaseline = "top";
ctx.fillText("( 0 , 0 )", 8, 5);
ctx.textAlign = "right";
ctx.textBaseline = "bottom";
ctx.fillText("( 500 , 375 )", 492, 370);
};
 |
| Fonte: Autoria própria |
<!-- Arquivo index.xml -->
<?xml version="1.0"?>
<!-- XML demonstration -->
<?xml-stylesheet type="text/css" href="estilo.css"?>
<!DOCTYPE planet>
<planet>
<ocean>
<name>Arctic</name>
<area>13,000</area>
<depth>1,200</depth>
</ocean>
<ocean>
<name>Atlantic</name>
<area>87,000</area>
<depth>3,900</depth>
</ocean>
<ocean>
<name>Pacific</name>
<area>180,000</area>
<depth>4,000</depth>
</ocean>
<ocean>
<name>Indian</name>
<area>75,000</area>
<depth>3,900</depth>
</ocean>
<ocean>
<name>Southern</name>
<area>20,000</area>
<depth>4,500</depth>
</ocean>
</planet>
/* Arquivo estilo.css */
/* ** XML demonstration ** */
planet:before {
display: block;
width: 8em;
font-weight: bold;
font-size: 200%;
content: "Oceans";
margin: -.75em 0px .25em -.25em;
padding: .1em .25em;
background-color: #cdf;
}
planet {
display: block;
margin: 2em 1em;
border: 4px solid #cdf;
padding: 0px 1em;
background-color: white;
}
ocean {
display: block;
margin-bottom: 1em;
}
name {
display: block;
font-weight: bold;
font-size: 150%;
}
area {
display: block;
}
area:before {
content: "Area: ";
}
area:after {
content: " million km\B2";
}
depth {
display: block;
}
depth:before {
content: "Mean depth: ";
}
depth:after {
content: " m";
}
 |
| Fonte: Autoria própria |
ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.